<template>
    <div>
        <div class="search-box">
            <div class="search-box-sub">
                <span class="lable-text">{{$t('alarm.inverterSn')}}</span>
                <el-input v-big v-model="searchData.inverterSn" clearable></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('alarm.wifiSn')}}</span>
                <el-input v-big v-model="searchData.wifiSn" clearable @change="toUpperCase"></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('user.loginName')}}</span>
                <el-input v-model="searchData.userName" clearable></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('alarm.errorType')}}</span>
                <el-select v-model="searchData.errorType" filterable clearable :placeholder="$t('pleaseSelect')" @change="query">
                    <el-option
                    v-for="item in alarmTypes"
                    :key="item.value"
                    :label="item.code"
                    :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('alarm.errorMessage')}}</span>
                <el-input v-model="searchData.errorMessage" clearable></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('alarm.date')}}</span>
                <el-date-picker
                    v-model="searchData.startTime"
                    type="date"
                    :placeholder="$t('index.startTime')"
                    value-format='yyyy-MM-dd'
                    :clearable='false'
                    :picker-options="pickerOptionsStatus">
                </el-date-picker>
                <span>-</span>
                <el-date-picker
                    v-model="searchData.endTime"
                    type="date"
                    :placeholder="$t('index.endTime')"
                    value-format='yyyy-MM-dd'
                    :clearable='false'
                    :picker-options="pickerOptionsEnd">
                </el-date-picker>
            </div>
            <div class="search-box-sub">
                <el-button type="primary" @click='query' >{{$t('query')}}</el-button>
                <el-button type="" @click="exportData" >{{$t('export')}}</el-button>
            </div>
        </div>

        <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe @selection-change="handleSelectionChange($event)"  :column='column'>
            <template #inverterSn="{data}">
                <a href="javascript:;" class="hover-a-link" style="color:#ED7523;" @click='openSnDetail(data)'>{{data.inverterSn}}</a>
            </template>
            <template #inverterType="{data}">
            {{UtilsFun.getValueByCode(deviceTypes,data.inverterType)}}
            </template>
            <template #errorType="{data}">
            {{UtilsFun.getValueByCode(alarmTypes,data.errorType)}}
            </template>
            <template #option="{data}">
                <div class="option-box">
                    <el-button icon="el-icon-document" :title="$t('index.js_seeDetails')" @click='showDetail(data)'></el-button>
                    <el-button icon='el-icon-search' :title="$t('troubleshooting.afterSale.title')" @click='showPropos(data)'></el-button>
                </div>
            </template>
        </baseTable>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
        <detailModal :detailDataList="detailDataList"></detailModal>
        <proposalModal :proposDataList="proposDataList"></proposalModal>
    </div>
</template>

<script>
import moment from 'moment'
import baseTable from '../../../components/common/baseTable'
import detailModal from './details'
import proposalModal from './proposal'
export default {
    components: {
        baseTable,
        detailModal,
        proposalModal
    },
    props: {

    },
    data() {
        return {
            searchData:{
                inverterSn:'',
                wifiSn:'',
                userName:'',
                errorType:'',
                errorMessage:'',
                startTime:moment(new Date()).subtract(1,'months').format('YYYY-MM-DD'),
                endTime:moment().format("YYYY-MM-DD")
            },
            // pickerOptions:{ //禁用今天之后的时间
            //     disabledDate(time) {
            //         return time.getTime() > Date.now()
            //     },
            // },
            // pickerOptionsEnd:{ //禁用今天之后的时间
            //     disabledDate(time) {
            //         return time.getTime() > Date.now()
            //     },
            //     minTime: this.searchData.startTime
            // },
            alarmTypes:[],
            deviceTypes:[],
            detailDataList:{},
            proposDataList:{},
            selectDatalist:[],
            loading:false,
            dataRows:[],
            column:[{
                title: this.$t('alarm.inverterSn'),
                value: 'inverterSn',
                slot:'inverterSn'
            },{
                title: this.$t('alarm.wifiSn'),
                value: 'wsn'
            },{
                title: this.$t('user.loginName'),
                value: 'loginName',
            },{
                title: this.$t('equipmentType'),
                value: 'inverterType',
                slot: 'inverterType'
            },{
                title: this.$t('alarm.errorType'),
                value: 'errorType',
                slot: 'errorType'
            },{
                title: this.$t('alarm.errorMessage'),
                value: 'errorMessage'
            },{
                title: this.$t('alarm.date'),
                value: 'timeStringVal',
                slot:'timeStringVal'
            },{
                title: this.$t('control'),
                slot: 'option'
            }],
            size:10,
            current:1,
            total:1,
            params:{}
        };
    },
    computed: {
        pickerOptionsStatus(){ //禁用今天之后的时间
        let that = this
            return {
                disabledDate(time) {
                    return time.getTime() > new Date(that.searchData.endTime).getTime() || time.getTime() > Date.now() 
                },
            }
        },
        pickerOptionsEnd(){ //禁用今天之后的时间
            let that = this
            return {
                disabledDate(time) {
                    return time.getTime() < new Date(that.searchData.startTime).getTime()-86400000 || time.getTime() > Date.now() 
                },
            }
            // that.searchData.startTime
        },
    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getDictionaryBatch();
        this.initTable()
        Object.assign()
    },
    methods: {
        toUpperCase(val){
            this.searchData.wifiSn=val.toUpperCase()
        },
        checkDate(){
            if(new Date(this.searchData.endTime).getTime()-new Date(this.searchData.startTime).getTime()>31*24*60*60*1000){
                this.$message.error(this.$t('index_js_time_range_over')+'31'+this.$t('index_js_days'))
                // this.searchData.endTime=moment(new Date(this.searchData.startTime).getTime()+31*24*60*60*1000).format('YYYY-MM-DD')
                return false
            }else{
                return true
            }
        },
        openSnDetail(data){
            console.log(data)
            sessionStorage.setItem("selRow_inverterType",data.inverterType);
            sessionStorage.setItem("selRow_siteId",data.siteId);
            sessionStorage.setItem("selRow_inverter_sn",data.inverterSn);
            sessionStorage.setItem("selRow_wifi_sn",data.wsn);
            sessionStorage.setItem("selRow_firmId",data.firmId);
            sessionStorage.setItem("selRow_sn_type",2);//逆变器
            sessionStorage.setItem("selRow_phase_type",data.phaseFlag);
            sessionStorage.setItem("selRow_battery_type",data.batteryFlag);
            sessionStorage.setItem("selRow_load_type",data.loadFlag);
            sessionStorage.setItem("selRow_batteryTypeFlag",data.batteryType);//电池类型
            sessionStorage.setItem("selRow_userId",data.userId);
            
            let url = this.$router.resolve({
                path: "/overview-inverter",
            });
            window.open(url.href, '_blank');
        },
        showDetail(data){
            this.detailDataList = data
            this.$store.commit('setNewVisible',true)
        },
        showPropos(data){
            this.proposDataList = data
            this.$store.commit('setNewVisibleEdit',true)
        },
        async getDictionaryBatch(){
            let res = await this.API.getDictionaryBatch({
                dictCodes:'ALARM_TYPES,INVERTER_TYPES,INTELBARS_INVERTER_TYPES',
                lang:localStorage.getItem('lang')
            })
            this.alarmTypes = res.ALARM_TYPES
            this.deviceTypes = res.INVERTER_TYPES
            if(window.location.hostname=="monitoramentox.intelbras.com.br"){
                this.deviceTypes=res.INTELBARS_INVERTER_TYPES;
            }
        },
        async initTable(){
            for (let key in this.searchData) {
                let value = JSON.stringify(this.searchData[key])
                if ((value.indexOf('*') != -1) || (value.indexOf('%') != -1)) {
                    this.comm.showMsg(false, this.$t('sql.ssr.msg'))
                    return
                }
            }
            this.loading = true
            this.params={
                size: this.size,
                current: this.current,
                ...this.searchData
            }
            let res = await this.API.getInverterAlarm(this.params)
            this.dataRows = res.rows || []
            this.total = res.total
            this.loading = false
        },
        uploadPage(){
            this.initTable()
        },
        returnTypeCode(val){
            let res
            this.typeList.forEach(item=>{
                if(val==item.value){
                    res = item.code
                }
            })
            return res
        },
        query(){
            if(this.checkDate()){
                this.current = 1
                this.initTable()
            }
        },
        handleSelectionChange(val){
            this.selectDatalist = val
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.initTable()
        },
        handleCurrentChange(val) {
          this.current = val
          this.initTable()
        },
        exportData(){
            this.comm.windowOpen('/alarm/AlarmExport',this.params)
        }
    },
};
</script>

<style lang="less">
</style>
